<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">参数列表</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
     <!-- 搜索 -->
      <el-form :inline="true" :model="tbPara" class="demo-form-inline">
        <el-form-item label="参数名称">
          <el-input v-model="tbPara.name" @input="e => tbPara.name = validForbid (e)" placeholder="参数名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="模板">
         <el-input v-model="tbPara.options" @input="e => tbPara.ptions = validForbid (e)" placeholder="模板" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getParaList()" size="small" plain>查询</el-button>
        </el-form-item>
           <div style="float:right"><el-button @click="$router.go(-1)" type="info"  size="small">返回</el-button></div>
      </el-form>
      <!-- 显示数据的表格 -->
      <el-table
          :data="ParaTabData"
          style="width: 100%">
          <el-table-column
            type="selection">
          </el-table-column>
          <el-table-column
            label="编号"
            prop="id">
          </el-table-column>
          <el-table-column
            label="参数名称"
            prop="name">
          </el-table-column>
          <el-table-column
            label="模板"
            prop="templateName">
          </el-table-column>
          <el-table-column
            label="可选值列表"
            prop="options">
          </el-table-column>
          <el-table-column
            label="排序"
            prop="seq">
          </el-table-column>
          <el-table-column
            align="right">
          <!-- 操作 -->
            <template slot="header">
              <el-button size='mini' @click="dialogVisible = true" type="success" plain>add</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="showPara(scope.row)" plain>Edit</el-button>
                <el-tooltip class="item" effect="dark" content="数据删除无法修复" placement="bottom-end">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)" plain>Delete</el-button>
               </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      <!-- 分页插件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 16, 32, 64]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
     <!-- 数据显示的提示框 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <!-- form表单 -->
        <el-form :model="showParaData" status-icon label-width="100px" class="demo-ruleForm">
          <el-form-item label="参数名称" prop="name">
            <el-input type="text" v-model="showParaData.name" @input="e => showParaData.name = validForbid (e)"  maxlength="16" show-word-limit autocomplete="off"></el-input>
          </el-form-item>
         <!--  <el-form-item label="模板" prop="templateName">
            <el-input type="text" v-model="showParaData.templateName"   maxlength="16" show-word-limit autocomplete="off" readonly></el-input>
          </el-form-item> -->
          <el-form-item label="可选值列表" prop="options">
            <el-input type="textarea" v-model="showParaData.options" :autosize="{minRows:2,maxRows:4}"
             maxlength="50" show-word-limit autocomplete="off" placeholder="不能为空"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="seq">
            <el-input type="number" v-model="showParaData.seq" @input="showParaData.seq=showParaData.seq.replace(/^(0+)|[^\d]+/g, '')" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="clearParaData()">取 消</el-button>
          <el-button type="primary" @click="SavaAndupdate()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tbPara: {},
      ParaTabData: [],
      pageNum: 0, // 页号
      pageSize: 8, // 页大小
      total: 0, // 总页数
      dialogVisible: false,
      title: 'add',
      showParaData: {}
    }
  },
  created () {
    this.getRouteData()
    this.getParaList()
  },
  methods: {
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.getParaList()
    },
    handleCurrentChange (newPageNo) {
      this.pageNum = newPageNo
      this.getParaList()
    },
    getRouteData () {
      this.tbPara.templateId = this.$route.query.id
    },
    // 分页
    async getParaList () {
      const { data: res } = await this.$http.post(`/goods/para/pageQueryByAll/${this.pageNum}/${this.pageSize}`, this.tbPara)
      // console.log(res.data.pageUtils.rows)
      this.ParaTabData = res.data.pageUtils.rows
      this.total = res.data.pageUtils.total
    },
    // 删除
    async handleDelete (row) {
      const { data: res } = await this.$http.delete(`/goods/para/delete/${row.id}`)
      if (res.success) {
        this.$message.warning('删除成功')
        this.getParaList()
      }
    },
    // 回显数据
    async showPara (row) {
      this.dialogVisible = true
      this.title = 'update'
      const { data: res } = await this.$http.get(`/goods/para/detail/${row.id}`)
      // console.log(res)
      if (res.success === true) {
        this.showParaData = res.data.tbPara
        this.showParaData.options = this.showParaData.options.replace(/,/g, '\n')
      }
    },
    clearParaData () {
      this.dialogVisible = false
      this.title = 'add'
      this.showParaData = {}
      this.getParaList()
    },
    // 新增
    async addPara () {
      var judge = false
      this.ParaTabData.forEach((item, index) => {
        console.log(item)
        if (item.name == this.showParaData.name) {
          judge = true
          return
        }
      })
      if (judge) {
        this.$message.error("不能插入相同的规格参数");
        this.showParaData.name = this.showParaData.name + (Math.round(Math.random() * 10000))
        return
      }
      await this.$http.post('/goods/para/addPara', this.showParaData) 
      this.clearParaData()
    },
    async handleEdit () {
      await this.$http.put('/goods/para/update', this.showParaData)
      this.clearParaData()
    },
    // 新增/修改的提交
    SavaAndupdate () {
      this.showParaData.templateId = this.$route.query.id
      // 修改 正则表达式的用法： https://www.jianshu.com/p/0734cc319aa3
      this.showParaData.options = this.showParaData.options.replace(/\n/g, ',')
      // 通过点击事件传参，id判断做那个操作
      if (!this.showParaData.id) {
        this.addPara()
      } else {
        this.handleEdit()
      }
    },
    handleClose () {
      this.clearParaData()
    }
  }
}
</script>

<style scoped>

</style>
